<template>
<!--  这里是 elementui写法-->
   <div class="app-container">
      <el-tabs type="border-card" @tab-click="handleClick">
        <el-tab-pane v-for="item in businessList" :label="item.business_name" :key="item.id">
          <el-card class="box-card" v-for="dataitem in item.business_data_list" :label="dataitem.data_name" :key="dataitem.id">
            <div slot="header" class="clearfix">
              <span>{{ dataitem.data_name }}</span>
              <el-checkbox style="float: right; padding: 3px 0" v-model="dataitem.checked" @change="" >选择</el-checkbox>
            </div>
            <div class="text item">
              {{ dataitem.describe }}
            </div>
          </el-card>

        </el-tab-pane>
      </el-tabs>
    </div>

  <!--  使用 tdsign写法-->

</template>
<script setup lang="ts">
import { ref } from 'vue'
let businessList = [
  {
    "id": 1,
    "business_name": "访客",
    "business_data_list": [{
      "id": 1,
      "business_id": 1,
      "data_name": "电子访客",
      "describe": "访客来访数据"
    },
      {
        "id": 2,
        "business_id": 1,
        "data_name": "自助机",
        "describe": "访客来访数据"
      },
      {
        "id": 9,
        "business_id": 1,
        "data_name": "电子访客",
        "describe": "测试链接"
      },
      {
        "id": 15,
        "business_id": 1,
        "data_name": "2023年电子访客预约单记录",
        "describe": "导出内容：2023年电子访客预约单记录"
      }
    ]
  },
  {
    "id": 2,
    "business_name": "餐饮",
    "business_data_list": [{
      "id": 3,
      "business_id": 2,
      "data_name": "餐饮订单数据",
      "describe": "内容"
    },
      {
        "id": 12,
        "business_id": 2,
        "data_name": "离职名单消费明细",
        "describe": "导出内容：user_no，user_name，(order_amount/100)，deal_time，pay_channel"
      },
      {
        "id": 13,
        "business_id": 2,
        "data_name": "早餐",
        "describe": "导出内容：时间,餐厅 餐线, 菜品名,价格, 销量 "
      }
    ]
  },
]

const handleClick = (evt: Event) => {
  console.log((evt.target as HTMLInputElement).value)
}

const chooseChecked = (item) => {
  console.log("点击了选中")
}
</script>

<script lang="tsx">
export default {
  name: 'HighlightTable',
};
</script>